<template>
    <div class="home-box">
        <div class="title">欢迎来到Vhans的虚拟机选型系统</div>
        <Swiper></Swiper>
        <Brand></Brand>
        <div class="button">
            <el-button type="primary" @click="openFrom">开始购买</el-button>
            <el-button type="danger" @click="openActivity">活动</el-button>
            <el-button type="success" @click="openPurchased">已购买</el-button>
            <el-button type="info" @click="handleQuit">退出</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import Brand from "./Brand/index.vue";
import Swiper from "./Swiper/index.vue";
import router from "@/router";
import useStore from "@/store";
import {onMounted} from "vue";

const {user} = useStore();
const openFrom = () => {
    router.push({path: "/form"});
}

const handleQuit = () => {
    router.push({path: "/login"});
    user.LogOut();
}

const openPurchased = () => {
    router.push({path: "/purchased"});
}

const openActivity = () => {
    router.push({path: "/activity"});
}

onMounted(() => {
    user.setCardList();
})

</script>

<style scoped>
.home-box {
    width: 95%;
    margin: 0 auto;

    .title {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        line-height: 100px;
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .button {
        text-align: center;
    }
}


</style>